<template>
	<view class="loginPage">
		<view class="form wrapper 
						position-relative center-horizontally 
						rounded shadow-plain"
			:style="{
				marginTop: (200 - KeyboardHeight) + 'rpx'
			}"
		>	
			<my-form name="emailForm"
					@keyboardChange="keyboardChange"
					:formAttr="{
						labelWidth: 100,
						labelPosition: 'right'
					}"
					:model="form"
					:rules="rules"
					:form-items="formItems"
					:btn-attr="btnAttr"
					@submit="submit"
					@validateChange="getLoginCode()"
			></my-form>
			<view class="goPage">
				<view class="goChange" @click="$go('/pages/user/change/index')">忘记了密码</view>
				<view class="goReg" @click="$go('/pages/user/reg/index')">没有账号，注册一个！</view>
			</view>
		</view>
	</view>
</template>

<script>
	import myForm from "@/components/my-form/my-form.vue";
	import {
		getLoginCode
	} from "@/api/user.js";
	import { mapActions } from 'vuex';
	import {
		PAGE_BACK_URL_KEY,
		LOGIN_PAGE
	} from "@/config/global.js";
	
	export default {
		components: {
			myForm
		},
		data() {
			return {
				form: {
					email: '',
					password: '',
					loginCode: ''
				},
				rules: {
					'email': {
						type: 'email',
						required: true,
						message: '请输入正确邮箱',
						trigger: ['blur', 'change']
					},
					'password': {
						type: 'string',
						required: true,
						message: '请输入密码',
						trigger: ['blur', 'change']
					},
					'loginCode': {
						type: 'string',
						required: true,
						message: '请输入验证码',
						trigger: ['blur', 'change']
					},
				},
				formItems: [
					{
						label: '邮箱',
						prop: 'email',
						borderBottom: true,
						ref: 'item1',
						leftIcon: 'email',
						input: {
							placeholder: '请输入邮箱'
						}
					},
					{
						label: '密码',
						prop: 'password',
						borderBottom: true,
						ref: 'item2',
						leftIcon: 'lock',
						input: {
							placeholder: '请输入密码',
							password: true
						}
					},
					{
						label: '验证码',
						prop: 'loginCode',
						borderBottom: true,
						ref: 'item3',
						leftIcon: 'error-circle',
						isValidate: true,
						validateSrc: '',
						input: {
							placeholder: '请输入验证码',
							password: false
						}
					},
				],
				btnAttr: {
					color: '#a0dcef',
					shape: 'circle',
					throttleTime: 1000,
					text: '登录'
				},
				KeyboardHeight: 0,
			};
		},
		mounted() {
			this.getLoginCode();
		},
		methods: {
			...mapActions({
				login: "user/login"
			}),
			//键盘叹气事假触发
			keyboardChange(e) {
				// 暂时不处理，直接上移一些
				// this.KeyboardHeight = e.height;
			},
			//获取验证码
			getLoginCode() {
				getLoginCode().then(res => {
					this.formItems[2].validateSrc = res;
				}).catch(err => {
					this.$msg(err.message);
				})
			},
			submit(data) {
				// 提交给store进行管理，有不同的登录方式用type进行传递即可
				this.login({...data, type: "email"}).then(res => {
					const prePage = this.$cache.get(PAGE_BACK_URL_KEY);
					// 因为之前发现过如果上一级页面是输入验证码错了还是什么情况登录出错了，
					// 反复跳转都是登录页面
					if(prePage == LOGIN_PAGE) prePage = false;
					this.$go(prePage? prePage : "/pages/index/index");
				}).catch(err => {
					this.$msg(err.message);
					this.form.loginCode = "";
					this.getLoginCode();
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.loginPage{
	background: url("@/static/login/loginBg.webp") no-repeat;
	background-size: 100% 100%;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	.form{
		width: 550rpx;
		padding: 40rpx;
		// height: 600rpx;
		background-color: rgba(#fff, .3);
		/* #ifdef H5 */
		margin-top: 700rpx;
		/* #endif */
		/* #ifndef H5 */
		margin-top: 760rpx;
		/* #endif */
		overflow: hidden;
	}
	.goPage{
		/* #ifdef H5 */
		font-size: 25rpx;
		/* #endif */
		/* #ifndef H5 */
		font-size: 30rpx;
		/* #endif */
		.goChange{
			float: left;
			margin-top: 30rpx;
			color: #747474;
		}
		.goReg{
			float: right;
			margin-top: 30rpx;
			
			color: #0000ff;
			cursor: pointer;
		}
	}
}
</style>
